<!--框架组建-->
<template>
    <div class="layout">
            <Layout>
                <Header>
                    <Menu mode="horizontal" theme="dark" active-name="1">
                        <div class="layout-logo">
                            <img src="/static/image/zt.png" alt="">
                        </div>
                        <div class="layout-nav">
                            <MenuItem name="1">
                                <Icon type="ios-navigate"></Icon>
                                admin
                            </MenuItem>
                            <MenuItem name="2">
                                <Icon type="ios-keypad"></Icon>
                               消息
                            </MenuItem>
                            <MenuItem name="3">
                                <Icon type="ios-log-out"/>
                               退出
                            </MenuItem>
                        </div>
                    </Menu>
                </Header>
                <Layout>
                <Sider hide-trigger :style="{background: 'white'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                            <MenuItem name="1-1"><router-link to="/"><Icon type="ios-paper"></Icon>新建文章</router-link></MenuItem>
                            <MenuItem name="1-2"><router-link to="/article"><Icon type="ios-gear"></Icon>文章管理</router-link></MenuItem>
                            <MenuItem name="1-3"><router-link to="/photo"><Icon type="ios-gear"></Icon>照片上传</router-link></MenuItem>
                           <MenuItem name="1-4"><router-link to="/photoType"><Icon type="ios-gear"></Icon>相册类型上传</router-link></MenuItem>

                    </Menu>
                </Sider>
                    <header class="headerTip">
                        <Breadcrumb>
                            <BreadcrumbItem to="/">
                                <Icon type="ios-home-outline"></Icon> 首页
                            </BreadcrumbItem>
                            <BreadcrumbItem to="/components/breadcrumb">
                                <Icon type="logo-buffer"></Icon> Components
                            </BreadcrumbItem>
                        </Breadcrumb>
                    </header>
                <Layout :style="{padding: '40px 24px 24px'}">
                    <Content :style="{padding: '24px', minHeight: '280px', background: 'rgba(253, 243, 235, 0.41)'}">
                        <router-view/>
                    </Content>
                </Layout>
                </Layout>
            </Layout>
    </div>
</template>
<script>
    export default {

    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .ivu-layout-sider-children {
        background-color: white!important;
    }
    .ivu-layout-header{
        padding: 0 20px;
    }
    .layout-logo{
        width: 130px;
        height: 50px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 8px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .ivu-icon{
           padding:0px 10px;
    }
    a{
        color:black;
    }
    .ivu-menu-item-selected,.ivu-menu-item-selected .ivu-icon{
        background-color: #495060;
        color: white;
    }
    .ivu-menu-vertical .ivu-menu-item-selected:hover{
        background-color: #495060;
    }
    .ivu-menu-item-selected a{
        color:white;
    }
    .headerTip{
        height: 40px;
        line-height: 40px;
        background-color: white;
        padding: 0 30px;
        position: absolute;
        width: 100%;
        margin-left: 200px;
        box-shadow: 1px 1px 9px #cccccc7d;
    }
</style>